<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-08-06 22:22:23
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container fit overflow-auto flex flex-col">
    <div class="info-bar m-b-20 col-auto">
      <InfoCard v-for="(item, index) in infoData" :key="index" :data="item" />
    </div>

    <ContainerCard title="模型数据" class="col">
      <template #title-right>
        <Select clearable v-model="value1" placeholder="全部模型" size="medium" :options="options" />
      </template>
      <div class="charts-area">
        <ContainerCard title="流量统计" has-border>
          <template #title-right>
            <DateRangePicker class="w-300 flex" v-model="time1" />
            <!-- <Select
              v-model="value1"
              class="w-80 flex m-l-10"
              placeholder="区域"
              size="small"
              :options="options"
            /> -->
            <!-- <Select
              v-model="value1"
              class="w-80 flex m-l-10"
              placeholder="设备"
              size="small"
              :options="options"
            />
            <Select
              v-model="value1"
              placeholder="用户"
              size="small"
              class="w-80 flex m-l-10"
              :options="options"
            /> -->
          </template>
          <div class="chart-item bg-#fff h-300 full-w">
            <LineChart :echarts-data="echartsData1" />
          </div>
        </ContainerCard>
        <ContainerCard title="观看量统计" has-border>
          <template #title-right>
            <DateRangePicker class="w-300 flex" v-model="time2" />
            <!-- <Select
              v-model="value1"
              class="w-80 flex m-l-10"
              placeholder="区域"
              size="small"
              :options="options"
            />
            <Select
              v-model="value1"
              class="w-80 flex m-l-10"
              placeholder="设备"
              size="small"
              :options="options"
            />
            <Select
              v-model="value1"
              placeholder="用户"
              size="small"
              class="w-80 flex m-l-10"
              :options="options"
            /> -->
          </template>
          <div class="chart-item bg-#fff h-300 full-w">
            <LineChart :echarts-data="echartsData2" />
          </div>
        </ContainerCard>
      </div>
      <div class="table-area full-w m-t-20">
        <ContainerCard title="问题热榜" has-border>
          <template #title-right>
            <DateRangePicker class="w-300 flex" v-model="time3" />
            <!-- <Select
              v-model="value1"
              class="w-80 flex m-l-10"
              placeholder="区域"
              size="small"
              :options="options"
            />
            <Select
              v-model="value1"
              class="w-80 flex m-l-10"
              placeholder="设备"
              size="small"
              :options="options"
            />
            <Select
              v-model="value1"
              placeholder="用户"
              size="small"
              class="w-80 flex m-l-10"
              :options="options"
            /> -->
          </template>
          <div class="full-w h-300">
            <BaseTable :columns="column" :table-data="tableData">
              <template #action>
                <el-button type="text" size="small">
                  编辑
                </el-button>
                <el-button type="text" size="small" class="c-#ff2727!important">
                  删除
                </el-button>
              </template>
            </BaseTable>
          </div>

          <Pagination class="m-t-20" :pagination-data="pageData" />
        </ContainerCard>
      </div>
    </ContainerCard>
  </div>
</template>

<script>
import InfoCard from '@/components/bmp/card/info-card.vue'
import ContainerCard from '@/components/bmp/card/container-card.vue'
import LineChart from '@/components/bmp/echarts/echarts-line.vue'
import { DateRangePicker, Select } from '@/components/bmp/form/index'
import BaseTable from '@/components/bmp/table/index.vue'
import Pagination from '@/components/pagination/pagination'

import { getList, chartTraffic, chartCount } from '@/api/model'

export default {
  components: {
    InfoCard,
    ContainerCard,
    LineChart,
    DateRangePicker,
    Select,
    BaseTable,
    Pagination
  },
  data() {
    return {
      infoData: [
        {
          label: '模型数量',
          value: '',
          unit: '个',
          img: require('@/assets/images/model/model1.png')
        },
        {
          label: '问答总数',
          value: '',
          unit: '条',
          img: require('@/assets/images/model/model2.png')
        },
        {
          label: '未匹配问题数',
          value: '',
          unit: '条',
          img: require('@/assets/images/model/model3.png')
        }
      ],
      time1: '',
      time2: '',
      time3: '',
      echartsData1: {
        title: {
          show: false,
          name: 'title'
        },
        legend: {
          show: false,
          data: []
        },
        xAxis: {
          name: '',
          data: []
        },
        yAxis: [{ name: '', unit: '' }],
        colorList: ['#00AAFF', '#00FFFF', '#00AAFF', '#00AAFF'],
        series: [[]]
      },
      echartsData2: {
        title: {
          show: false,
          name: 'title'
        },
        legend: {
          show: false,
          data: []
        },
        xAxis: {
          name: '',
          data: []
        },
        yAxis: [{ name: '', unit: '' }],
        colorList: ['#00AAFF', '#00FFFF', '#00AAFF', '#00AAFF'],
        series: [[]]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      options: [],
      value1: '',
      value2: '',
      column: [
        {
          prop: 'matter',
          label: '问题'
        },
        {
          prop: 'answer',
          label: '答案'
        },
        {
          prop: 'model',
          label: '模型'
        },
        {
          prop: 'relatedAnswers',
          label: '关联答案'
        },
        {
          prop: 'trigger',
          label: '触发次数'
        },
        {
          prop: 'createTime',
          label: '创建时间'
        },
        {
          prop: 'updateTime',
          label: '更新时间'
        },
        {
          prop: 'action',
          label: '操作'
        }
      ],
      tableData: [
        /*  {
           matter: '问题1',
           answer: '回答1',
           model: '模型A',
           relatedAnswers: '相关回答1',
           trigger: 10,
           createTime: '2024-05-12',
           updateTime: '2024-05-12'
         } */
      ],
      pageData: {
        currentPage: 1,
        pageSize: 9,
        total: 0
      }
    }
  },
  created() {
    this.init()
    // this.getChart()
  },
  watch: {
    value1: {
      handler(val) {
        if (this.time1) {
          let _obj = {
            start_date: this.time1[0].split('-').join(''),
            end_date: this.time1[1].split('-').join('')
          }
          this.getChart(_obj)
        }
        if (this.time2) {
          let _obj = {
            start_date: this.time2[0].split('-').join(''),
            end_date: this.time2[1].split('-').join('')
          }
          this.getChart2(_obj)
        }
      },
      deep: true
    },
    time1: {
      handler(val) {
        if (val) {
          let _obj = {
            start_date: val[0].split('-').join(''),
            end_date: val[1].split('-').join('')
          }
          this.getChart(_obj)
        }
      },
      deep: true
    },
    time2: {
      handler(val) {
        if (val) {
          let _obj = {
            start_date: val[0].split('-').join(''),
            end_date: val[1].split('-').join('')
          }
          this.getChart2(_obj)
        }
      },
      deep: true
    }
  },
  mounted() { },
  methods: {
    init() {
      getList().then((res) => {
        // 模型下拉
        this.options = res.data.map((v) => {
          return {
            value: v.model_uniqueid,
            label: v.title
          }
        })
        // 统计数量
        let arr = res.data
        let collect_faq_count = 0
        let collect_question_unmatch_count = 0
        arr.forEach((v) => {
          collect_faq_count = collect_faq_count + v.collect_faq_count
          collect_question_unmatch_count =
            collect_question_unmatch_count + v.collect_question_unmatch_count
        })
        this.infoData[0].value = arr.length // 模型数量
        this.infoData[1].value = collect_faq_count // 问答数量
        this.infoData[2].value = collect_question_unmatch_count // 未匹配数量

        // 初始化
        let y = new Date().getFullYear()
        let m = (new Date().getMonth() + 1).toString().padStart(2, '0')
        let d = new Date().getDate().toString().padStart(2, '0')
        let str = this.subtractOneMonth(`${y}-${m}-${d}`)
        this.time1 = [str, `${y}-${m}-${d}`]
        this.time2 = [str, `${y}-${m}-${d}`]
      })
    },
    subtractOneMonth(date) {
      const newDate = new Date(date)
      newDate.setMonth(newDate.getMonth() - 1)
      let y = newDate.getFullYear()
      let m = (newDate.getMonth() + 1).toString().padStart(2, '0')
      let d = newDate.getDate().toString().padStart(2, '0')
      return `${y}-${m}-${d}`
    },
    dateRangeArray(startDate, endDate) {
      let dates = []
      let currentDate = new Date(startDate)
      while (currentDate <= endDate) {
        let y = new Date(currentDate).getFullYear()
        let m = (new Date(currentDate).getMonth() + 1)
          .toString()
          .padStart(2, '0')
        let d = new Date(currentDate).getDate().toString().padStart(2, '0')
        dates.push(`${y}${m}${d}`)
        currentDate.setDate(currentDate.getDate() + 1)
      }
      return dates
    },
    getChart(obj) {
      obj.model_uniqueid = this.value1
      this.echartsData1.xAxis.data = this.dateRangeArray(
        new Date(this.time1[0]),
        new Date(this.time1[1])
      )
      chartTraffic(obj).then((res) => {
        let arr = this.echartsData1.xAxis.data.map((v) => {
          let _obj = res.data.find((x) => {
            return x.query_date == v
          })
          if (_obj) {
            return [v, _obj.total_traffic]
          } else {
            return [v]
          }
        })
        this.echartsData1.series[0] = arr.map((x) => x[1])
        this.echartsData1 = JSON.parse(JSON.stringify(this.echartsData1))
      })
    },
    getChart2(obj) {
      obj.model_uniqueid = this.value1
      this.echartsData2.xAxis.data = this.dateRangeArray(
        new Date(this.time2[0]),
        new Date(this.time2[1])
      )
      chartCount(obj).then((res) => {
        let arr = this.echartsData2.xAxis.data.map((v) => {
          let _obj = res.data.find((x) => {
            return x.query_date == v
          })
          if (_obj) {
            return [v, _obj.total_count]
          } else {
            return [v]
          }
        })
        this.echartsData2.series[0] = arr.map((x) => x[1])
        this.echartsData2 = JSON.parse(JSON.stringify(this.echartsData2))
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.info-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.charts-area {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
</style>
